<UserControl x:Class="Rawr.UI.ChartPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <UserControl.Resources>
        <DataTemplate x:Key="ChartPickerItemTemplatePrimary">
            <Grid Background="#00000000" HorizontalAlignment="Stretch" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave">
                <TextBlock Margin="4" Text="{Binding Header}"/>
                <Path Fill="#000066" Margin="4,0,4,0" HorizontalAlignment="Right" VerticalAlignment="Center" Data="M0,0 4,4 0,8 z"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ChartPickerItemTemplateSecondary">
            <Grid Background="#00000000" HorizontalAlignment="Stretch">
                <TextBlock Margin="4" Text="{Binding Header}"/>
            </Grid>
        </DataTemplate>
        <Style x:Key="ChartPickerItemContainerTemplate" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}" MouseLeftButtonUp="Grid_MouseLeftButtonUp">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Margin="0,0,-1,0" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
        <ToggleButton x:Name="Toggle" HorizontalAlignment="Left" Margin="4,0,4,0" IsChecked="{Binding IsOpen, ElementName=PopupChartPicker, Mode=TwoWay}">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="TextBlockChartButtonPrimary" Margin="3,0,3,0" Text="Gear"/>
                <Path Fill="#000066" Margin="4,0,4,0" VerticalAlignment="Center" Data="M0,0 4,4 0,8 z"/>
                <TextBlock x:Name="TextBlockChartButtonSecondary" Margin="3,0,3,0" Text="Head"/>
            </StackPanel>
        </ToggleButton>
        <Popup x:Name="PopupChartPicker" Margin="4">
            <Grid Background="#00000000" Margin="-10000,-10000,-10000,-10000" IsHitTestVisible="True" MouseLeftButtonDown="Background_MouseLeftButtonDown">
                <Border BorderThickness="1" Width="350" Height="500" Margin="10000,10000,10000,10000" CornerRadius="0,0,4,4" BorderBrush="#CC000066" Background="#F3F3F3FF">
                    <Grid x:Name="LayoutRoot">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5*"/>
                            <ColumnDefinition Width="1"/>
                            <ColumnDefinition Width="6*"/>
                        </Grid.ColumnDefinitions>
                        <ListBox x:Name="ListBoxPrimary" 
                            Background="Transparent" 
                            BorderThickness="0" 
                            Padding="0" 
                            Margin="0,0,0,4"
                            HorizontalContentAlignment="Stretch" 
                            ItemsSource="{Binding Items}"
                            ItemTemplate="{StaticResource ChartPickerItemTemplatePrimary}" 
                            SelectedItem="{Binding PrimaryItem, Mode=TwoWay}" 
                            ItemContainerStyle="{StaticResource ChartPickerItemContainerTemplate}"/>
                        <Rectangle Grid.Column="1" Fill="#99000066"/>
                        <ListBox x:Name="ListBoxSecondary" Grid.Column="2" 
                            Background="Transparent" 
                            BorderThickness="0" 
                            Padding="0" 
                            Margin="0,0,0,4"
                            HorizontalContentAlignment="Stretch" 
                            ItemsSource="{Binding PrimaryItem.Items}" 
                            ItemTemplate="{StaticResource ChartPickerItemTemplateSecondary}" 
                            ItemContainerStyle="{StaticResource ChartPickerItemContainerTemplate}"/>
                    </Grid>
                </Border>
            </Grid>
        </Popup>
    </StackPanel>
</UserControl>
